<template>
  <xn-form-container
    title="编辑产品型号基本信息"
    :width="550"
    :visible="visible"
    :destroy-on-close="true"
    @close="onClose"
  >
    <a-form
      style="height: 100vh; overflow: auto"
      ref="formRef"
      :model="formData"
      :rules="formRules"
      layout="vertical"
    >
      <a-form-item label="产品型号名称" name="PMName">
        <a-input
          v-model:value="formData.PMName"
          placeholder="请输入产品型号名称"
          allow-clear
        />
      </a-form-item>
      <a-form-item label="产品型号编号" name="PMNo">
        <a-input
          v-model:value="formData.PMNo"
          placeholder="请输入产品型号编号"
          allow-clear
        />
      </a-form-item>
      <a-form-item label="产品类型" name="PTID">
        <a-select
          v-model:value="formData.PTID"
          style="width: 100%"
          placeholder="请选择产品类型"
          :options="props.productType"
        ></a-select>
      </a-form-item>
      <a-form-item label="产品型号说明" name="PMDesp">
        <a-input
          v-model:value="formData.PMDesp"
          placeholder="请输入产品型号说明"
          allow-clear
        />
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button class="xn-mr8 mr10" @click="onClose">关闭</a-button>
      <a-button type="primary" @click="onSubmit">确认修改</a-button>
    </template>
  </xn-form-container>
</template>

<script setup>
import { required } from "@/utils/formRules";
import productmodelmgrApi from "@/api/productManagement/productmodelmgrApi";
import { defineProps } from "vue";
import XnFormContainer from "@/components/XnFormContainer/index.vue";
// 默认是关闭状态
const visible = ref(false);
const emit = defineEmits({ successful: null });
const formRef = ref();
const props = defineProps({
  productType: Array,
});
// 表单数据
const formData = ref({});
// 打开抽屉
const onOpen = (record) => {
  visible.value = true;
  if (record) {
    formData.value = Object.assign({}, record);
  } else {
    formData.value = {};
  }
};
// 关闭抽屉
const onClose = () => {
  formRef.value.resetFields();
  visible.value = false;
};

// 默认要校验的
const formRules = {
  PMName: [required("请输入产品型号名称")],
  PMNo: [required("请输入产品型号编号")],
  PTID: [required("请输入产品类型ID")],
 
};

// 验证并提交数据
const onSubmit = () => {
  console.log(111);
  formRef.value
    .validate()
    .then(() => {
      productmodelmgrApi
        .modifyProductModelBaseInfo({
          PMName: formData.value.PMName,
          PMNo: formData.value.PMNo,
          PTID: formData.value.PTID,
          ID: formData.value.ID,
          PMDesp: formData.value.PMDesp,
        })
        .then(() => {
          onClose();
          emit("successful");
        });
    })
    .catch(() => {});
};

// 调用这个函数将子组件的一些数据和方法暴露出去
defineExpose({
  onOpen,
});
</script>
